<template>
  <el-form label-width="140px" :model="props.taskOptions" :rules="rules" ref="formRef">
    <!-- <el-form-item label="瓦片名称" prop="target_id" v-show="false">
      <el-input v-model="uploadInfo.catalog_id"></el-input>
    </el-form-item>
    <el-form-item label="缩放级别" prop="target_id" v-show="false">
      <el-input v-model="uploadInfo.catalog_id"></el-input>
    </el-form-item> -->
    <el-form-item label="数据来源">
      <el-input v-model="props.taskOptions.shujulaiyuan"></el-input>
    </el-form-item>
    <el-form-item label="瓦片格式" prop="redioId">
      <n-radio-group v-model:value="props.taskOptions.wapiangeshi" name="radiobuttongroup1">
        <n-radio :key="'db'" :value="'db'" :label="'db'" />
        <n-radio :key="'idb'" :value="'idb'" :label="'idb'" />
        <!-- <n-radio :key="'pyr'" :value="'pyr'" :label="'pyr'" /> -->
        <n-radio :key="'ptp'" :value="'ptp'" :label="'ptp'" />
        <!-- <n-radio :key="'ptp1000'" :value="'ptp1000'" :label="'ptp1000'" />
        <n-radio :key="'ptp2000'" :value="'ptp2000'" :label="'ptp2000'" /> -->
      </n-radio-group>
    </el-form-item>
    <el-form-item label="补齐方式" prop="redioId">
      <n-radio-group v-model:value="props.taskOptions.buqifangshi" name="radiobuttongroup1">
        <n-radio :key="'不补齐'" :value="'不补齐'" :label="'不补齐'" />
        <n-radio :key="'补白'" :value="'补白'" :label="'补白'" />
        <n-radio :key="'补黑'" :value="'补黑'" :label="'补黑'" />
        <n-radio :key="'透明'" :value="'透明'" :label="'透明'" />
      </n-radio-group>
    </el-form-item>
    <el-form-item label="投影方式" prop="redioId">
      <n-radio-group v-model:value="props.taskOptions.touyingfangshi" name="radiobuttongroup1">
        <n-radio :key="'web墨卡托'" :value="'3857'" :label="'web墨卡托'" />
        <n-radio :key="'经纬度'" :value="'4326'" :label="'经纬度'" />
      </n-radio-group>
    </el-form-item>
    <el-form-item label="时间" prop="name">
      <el-date-picker
        v-model="props.taskOptions.shijian"
        type="date"
        placeholder="请选择日期"
        :size="'large'"
      />
    </el-form-item>
    <el-form-item label="匀色方式" prop="name">
      <el-select
        v-model="props.taskOptions.yunsefangshi"
        placeholder="请选择"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in yunseoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="选择文件" prop="input3">
      <el-input
        v-model="props.taskOptions.wenjian"
        style="max-width: 600px"
        placeholder="请选择文件"
        class="input-with-select"
      >
        <template #append>
          <el-button @click="handShowModel">选择文件夹</el-button>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="描述" prop="name">
      <el-input type="textarea" :rows="4" v-model="props.taskOptions.miaoshu"></el-input>
    </el-form-item>
  </el-form>
  <!-- {{props.taskOptions}} -->
  <n-space style="width: 100%" justify="end">
    <el-button type="primary" @click="handleSubmit">创建</el-button>
  </n-space>
  <el-dialog
    v-model="dialogVisible"
    title="选择文件"
    width="500"
  >
    <el-tree
      style="max-width: 600px"
      :props="tprops"
      :data="fileData"
      @node-click="nodeClick"
      show-checkbox
      @check-change="handleCheckChange"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, defineProps } from "vue";
import {apiList} from '@/api/apiList'

let dialogVisible = ref(false)

let fileData = ref([
])

const emits = defineEmits(['changeAddVisable'])

onMounted(() => {
  apiList.wapian.getFileScan().then(res=> {
    fileData.value = res.data
  })
})

let respath = []
function handleCheckChange(a,b,c) {
  if (b) {
    respath.push(a.path)
  }else{
    let index = respath.indexOf(a.path)
    if (index != -1) {
      respath.splice(index, 1) 
    }
  }
  if (respath.length > 0) {
    props.taskOptions.wenjian = respath[0]
  }
}

function handleSubmit() {
  props.showAddDialog = false
  emits('changeAddVisable', false)
}

function nodeClick(data) {
  treeData.value = data;
}

let props = defineProps({
  taskOptions: Object,
  showAddDialog: false,
});

function handShowModel(params) {
  dialogVisible.value = true
}

const yunseoptions = [
  {
    value: "全球色彩模板影像库匀光匀色",
    label: "全球色彩模板影像库匀光匀色",
  },
  {
    value: "地理模板匀色",
    label: "地理模板匀色",
  },
  {
    value: "自适应匀色",
    label: "自适应匀色",
  },
];

const tprops = {
  label: "name",
  children: "children",
};

</script>
